<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>WindowMsg test</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.windowmsg-1.0.js"></script>
    
    <script type="text/javascript">

      $(function(){
        // don't forget this init!      
        $.initWindowMsg();
        
        // upon click of a button, send corresponding text input value to parent window
        $('#button1').click(function(){
          value = $('#in1').val();
          $.triggerParentEvent("childMsg1", value); 
        });
        $('#button2').click(function(){
          value = $('#in2').val();
          $.triggerParentEvent("childMsg2", value); 
        });

        // set up the message handlers, listen for events 'parentMsg1' and 'parentMsg2'        
        $.windowMsg("parentMsg1", function(message) {
          $('#in1').val(message);
        });
        $.windowMsg("parentMsg2", function(message) {
          $('#in2').val(message);
        });

      });    
    
    </script>
  </head>
  <body>
  
    <h1>Child window</h1>

    <p>Use the form below to send messages back to the parent</p>
        
    <form>
    
    <p>
    <input id="in1" type="text" value=""/>
    <input id="button1" type="button" value="send" />
    </p> 

    <p>
    <input id="in2" type="text" value=""/>
    <input id="button2" type="button" value="send" />
    </p> 
  
    </form>
    
  </body>
</html>
  
  